<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<% 
String path = request.getContextPath(); //跳转后样式丢失问题
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=path%>/background/style/resource/Css/bootstrap.css" />
<link rel="stylesheet" href="<%=path%>/background/style/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/background/style/resource/Css/bootstrap-responsive.css" />
<link href="<%=path%>/background/style/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/background/style/resource/Css/style.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/background/style/css/sweetalert.css" />
<script type="text/javascript"src="<%=path%>/background/style/resource/Js/jquery.js"></script>
<script type="text/javascript"src="<%=path%>/background/style/resource/Js/jquery.sorted.js"></script>
<script type="text/javascript"src="<%=path%>/background/style/resource/Js/bootstrap.js"></script>
<script type="text/javascript"src="<%=path%>/background/style/resource/Js/ckform.js"></script>
<script type="text/javascript"src="<%=path%>/background/style/resource/Js/common.js"></script>
<script type="text/javascript"src="<%=path%>/background/style/js/sweetalert.min.js"></script>
<script type="text/javascript" src="<%=path%>/background/style/js/sweetalert-dev.js"></script>
<script type="text/javascript" src="<%=path%>/background/style/js/NavPicture.js"></script>
<title>导航管理</title>
<style>
#picture {
	width: 1000px;
	height: 1000px;
	margin-left:50px; 
}

#picture #top {
	height: 500px;
	width: 1000px;
}
#picture #top dl{
	margin-left:10px;
	width:300px;
	height:200px;
	border:1px solid orange;
	float:left;
}
#picture #bottom{
	height: 500px;
	width: 1000px;
}
#picture #bottom dl{
	margin-left:10px;
	width:300px;
	height:200px;
	border:1px solid orange;
	float:left;
}
span{
	color:red;
}
</style>
</head>
<body>
	<ul class="nav nav-tabs" style="margin-left:50px;margin-top:30px;">
		<li id="addPC"><a href="#upload">上传照片</a></li>
		<li class="active" id="manPc"><a href="#picture">管理照片</a></li>
	</ul>

	<div id="picture">
		<h4>导航图</h4>
		<div id="top">
				<dl>
					<dt>
						<img alt="" src="../style/img/1.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
				<dl>
					<dt>
						<img alt="" src="../style/img/2.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
				<dl>
					<dt>
						<img alt="" src="../style/img/3.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
				<dl>
					<dt>
						<img alt="" src="../style/img/4.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
				<dl>
					<dt>
						<img alt="" src="../style/img/5.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
				<dl>
					<dt>
						<img alt="" src="../style/img/5.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
		</div>
		
		<h4>非导航图</h4>
		<div id="bottom">
		<dl>
					<dt>
						<img alt="" src="../style/img/1.jpg">
					</dt>
					<dd>删除</dd>
				</dl>
		</div>
	</div>
	<div id="upload" style="margin-left:50px;width:1000px; display:none;">
		<form  action="<%=path%>/picture/upload"  id="uploadForm" method="post" enctype="multipart/form-data"> 
		<table class="table table-bordered table-hover definewidth m10" style="margin-top:30px;">
			<tr>
				<td class="tableleft">选择图片</td>
				<td>
					<div class="container kv-main">
						<div class="page-header">
							<div class="form-group">
								<!--  glyphicon glyphicon-folder-open -->
								<input id="upfile" type="file" name="file"><span id="fileMsg"></span><br>
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="tableleft">说明</td>
				<td><textarea name="message" id="Message"></textarea><span id="Msg"></span></td>
			</tr>
			<tr>
				<td class="tableleft">是否导航</td>
				<td>
					<input type="radio" name="isNav" value="1"/>是&nbsp;&nbsp;&nbsp;
					<input type="radio" name="isNav" value="0" checked/>否
				</td>
			</tr>
		</table>
		<br>
		<input type="submit" class="btn btn-primary span3" value="提交"/>
		</form>
	</div>
	<script src="../style/js/fileinput.js" type="text/javascript"></script>
    <script src="../style/js/fileinput_locale_de.js" type="text/javascript"></script>
	<script src="../style/resource/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript">
	  
			$("#upfile").fileinput({
				showUpload: false,
				showCaption: false,
			    allowedFileExtensions : ['jpg', 'png','gif'],//上传文件只能是图片 
				browseClass: "btn btn-primary btn-lg",
		        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
			});

	    </script>
</body>
</html>